<template>
  <div class="validate-tool-container common-container">
    <div class="validate-tool-content">
      <el-form
        ref="validateFormRef"
        :model="validateForm"
        :rules="rule"
        label-width="120px"
        label-position="top"
      >
        <el-form-item label="手机号码" prop="phone" class="validate-form-item">
          <el-input v-model="validateForm.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="匹配文字变色(搜索时)" prop="keyword" class="validate-form-item">
          <div>示例：<span v-html="keyword"></span></div>
          <el-input v-model="validateForm.keyword" placeholder="请输入关键字" @input="onVerifyKeyWordColor"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard" class="validate-form-item">
          <div>验证身份证是否正确</div>
          <el-input v-model="validateForm.idCard" placeholder="请输入身份证"></el-input>
        </el-form-item>
        <el-form-item label="网址" prop="website" class="validate-form-item">
          <div>验证url是否正确</div>
          <el-input v-model="validateForm.website" placeholder="请输入url"></el-input>
        </el-form-item>
        <el-form-item label="html标签" prop="html" class="validate-form-item">
          <div>是否是html标签</div>
          <el-input v-model="validateForm.html" placeholder="请输入html标签"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date" class="validate-form-item">
          <div>是否是正确的日期</div>
          <el-input v-model="validateForm.date" placeholder="请输入日期"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" class="validate-form-item">
          <div>是否是正确的邮箱</div>
          <el-input v-model="validateForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  validatorMethod,
  verifyPhone,
  verifyTextColor,
  verifyIdCard,
  verifyWebsite,
  verifyHtml,
  verifyDate,
  verifyEmail
} from '@/utils/validate'
export default {
  name: 'index',
  data(){
    return{
      validateForm:{
        phone: null,
        keyword: null,
        idCard: null,
        website: null,
        html: null,
        date: null,
        email: null,
      },
      rule:{
        phone:[
          {required: true, validator: validatorMethod(verifyPhone,'请输入正确的手机号码'),trigger:['blur','change']},
        ],
        idCard:[
          {required: true, validator: validatorMethod(verifyIdCard,'请输入正确的身份证'),trigger:['blur','change']},
        ],
        website:[
          {required: true, validator: validatorMethod(verifyWebsite,'请输入正确的网址'),trigger:['blur','change']},
        ],
        html:[
          {required: true, validator: validatorMethod(verifyHtml,'请输入正确的html标签'),trigger:['blur','change']},
        ],
        date:[
          {required: true, validator: validatorMethod(verifyDate,'请输入正确的日期'),trigger:['blur','change']},
        ],
        email:[
          {required: true, validator: validatorMethod(verifyEmail,'请输入正确的邮箱'),trigger:['blur','change']},
        ],
      },
      text: '山长水阔与少年,星辰未变已动心',
      keyword: '',
    }
  },
  mounted () {
    this.keyword = this.text
  },
  methods:{
    // 匹配文字，字体变色
    onVerifyKeyWordColor(value){
      if(!value){
        this.keyword = this.text
      }else{
        this.keyword = verifyTextColor(value, this.text)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.validate-tool-content{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  text-align: left;

}
</style>
<style lang="scss">
.validate-form-item{
  .el-form-item__label{
    font-weight: 600;
  }
}
</style>
